<script lang="ts" setup>
import {convertLevel} from '@/utils'

const {videoInfo, videoChapterList, toPlayer} = $(useVideo())

</script>

<template>
    <view h-260 pt w-full bg="#f6f6f6" between box-border>
        <view w-254 ml relative flex-shrink-0>
            <image :src="videoInfo?.cover_img" w-full h-180 rounded/>
            <view class="top-43 left-50 z-1 w-150 h-100 absolute center flex-col"
                  @click="toPlayer(videoChapterList[0].episodeList[0])">
                <view w-full h-full bg=" #333333" opacity-90 absolute rounded z--1/>
                <image src="@/static/images/icons/video/detail/play.png" w-48 h-48/>
                <text text="20 white">
                    点击试看
                </text>
            </view>
        </view>
        <view mx-2>
            <text text="26 #333333">
                {{ videoInfo?.title }}
            </text>
            <view class="second" my-1>
                <text>级别：{{ convertLevel(videoInfo?.course_level) }}</text>
                <image v-for="i in 5" :key="i" src="@/static/images/icons/common/fire.png" mode="scaleToFill"/>
            </view>
            <view class="user-price">
                <view class="user">
                    <image src="@/static/images/icons/common/user.png" mode="scaleToFill"/>
                    <text>{{ videoInfo?.uv }}</text>
                </view>
                <view class="price">
                    <view>
                        <text class="dollor">
                            ¥
                        </text>
                        <text class="price">
                            {{ videoInfo?.amount }}
                        </text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.second {
    display: flex;
    align-items: center;

    text {
        color: #7f7f7f;
        font-size: 24rpx;
        margin-right: 10rpx;
    }

    image {
        width: 27rpx;
        height: 27rpx;
        margin-right: 5rpx;
    }
}

.user-price {
    display: flex;
    justify-content: space-between;

    .user {
        display: flex;
        align-items: center;

        image {
            width: 32rpx;
            height: 32rpx;
        }

        text {
            font-size: 28rpx;
            color: #7f7f7f;
            margin-left: 5rpx;
        }
    }

    .price {
        display: flex;
        align-items: baseline;

        .dollor {
            font-size: 24rpx;
        }

        & > view {
            display: flex;
            align-items: baseline;
            margin-left: 20rpx;

            &:last-child {
                color: #e51b11;
                font-size: 40rpx;
            }
        }
    }
}
</style>
